<template>
    <n-form class="my-4" label-placement="left" :label-width="160" >
        <FormItemComponent title="实例名称：" tips="实例名称，该实例代表一次“事件”的发生">
                <n-input   v-model:value="form.name"   placeholder="请输入实例名称" />
        </FormItemComponent>
        <FormItemComponent title="相关股票：" tips="该实例所发生的股票的代码">
                <n-select  v-model:value="form.stock_code" :options="select_content.stock_list"  placeholder="请输入股票代码" />
        </FormItemComponent>
        <FormItemComponent title="实例类型：" tips="实例类型，目前支持股票发生形态的“形态类”和某件事件发生的“事件类”">
                <n-select v-model:value="form.item_type" :options="select_content.item_type_list" placeholder="请选择实例类型" />
        </FormItemComponent>
        <FormItemComponent title="开始时间：" tips="事件的开始时间">
            <n-date-picker class="w-full" v-model:value="form.start_date" type="date" placeholder="请选择开始时间"  />
        </FormItemComponent>
        <FormItemComponent title="结束时间：" tips="事件的结束时间">
            <n-date-picker class="w-full" v-model:value="form.end_date" type="date" placeholder="请选择结束时间"  />
        </FormItemComponent>
        <FormItemComponent v-for="i in form.attribute_list" :key="i.id" :title="i.label+'：'" tips="自定义属性">
            <n-select v-model:value="i.value" :options="select_content.attritue_state" placeholder="请选择实例类型" />
        </FormItemComponent>
        <n-flex justify="end">
            <n-button @click="submitCreate()" type="primary">
                提交
            </n-button>
        </n-flex>
    </n-form>

</template>

<script setup>
import FormItemComponent from '@/components/FormItemComponent.vue';
import { onMounted, ref } from 'vue';
import { ArchiveOutline } from '@vicons/ionicons5';
import { useScenarioStore } from '@/stores/scenarioStore';
import {useStockStore} from '@/stores/stockStore';

const scenarioStore = useScenarioStore();
const stockStore = useStockStore();
const emit = defineEmits([ "finish_create" ]);

const select_content = {
    item_type_list:[
        {
            label:"形态类",
            value:"形态类"
        },
        {
            label:"事件类",
            value:"事件类"
        },
    ],
    attritue_state:[
        {
            label:"上涨",
            value:"上涨"
        },{
            label:"下跌",
            value:"下跌"
        },{
            label:"震荡",
            value:"震荡"
        },{
            label:"稳定",
            value:"稳定"
        },
    ],
stock_list:[]
}

const form = ref({
    name: null,
    stock_code:null,
    item_type:null,
    start_date:null,
    end_date:null,
    attribute_list:[]
})
onMounted(async ()=>{
    
    for(let i of scenarioStore.current_scenario.attribute_list){
        form.value.attribute_list.push({
            label:i.label,
            index:i.index
        });
    }
    await stockStore.getStockList();
    for(let i of stockStore.stock_list){
        select_content.stock_list.push({
            label:i.name,
            value:i.stock_code
        });
    }
})


const submitCreate = ()=>{
    let new_scenario_item = JSON.parse(JSON.stringify(form.value));
    scenarioStore.addScenarioItem(new_scenario_item,scenarioStore.current_scenario.id);
    emit('finish_create');
}



</script>